<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>网站数据同步微信|成都响应式网站建设|响应式网站设计公司|成都网站建设|成都HTML5网站建设|成都隆领科技有限公司</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="网站数据同步微信|成都网站建设|响应式网站设计公司|成都响应式网站建设|成都HTML5|网站建设成都隆领科技有限公司" />
    <meta name="description" content="网站数据同步微信|成都响应式网站建设|响应式网站设计公司|成都网站建设|成都HTML5网站建设|成都隆领科技有限公司" />
    <link rel="stylesheet" type="text/css" href="/template/longling/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/template/longling/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/template/longling/css/animate.css" />
    <link rel="stylesheet" type="text/css" href="/template/longling/css/flexslider.css" />
    <link rel="stylesheet" type="text/css" href="/template/longling/css/main.css" />
    <link rel="shortcut icon" href="/template/longling/favicon.ico" type="image/x-icon">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/template/longling/js/jquery-1.11.3.min.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/template/longling/js/html5shiv.min.js"></script>
    <script src="/template/longling/js/respond.min.js"></script>
    <![endif]-->
</head>
	<body>
		<!-- start navigation -->
		<nav class="navbar navbar-default">
			<div class="container">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				    </button>
					<a class="navbar-brand hidden-xs" href="/index.html"><img src="/template/longling/images/logo.png" alt="logo.png" /></a>
					<a class="navbar-brand small visible-xs" href="/index.html"><img src="/template/longling/images/logo-small.png" alt="logo.png" /></a>
					<span style="font-size: 18px;color: #ED2123;font-weight: bold;" class="visible-xs">隆领</span>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav navbar-right">
						<li><a href="/index.html#home" class="smoothScroll">首 页</a></li>
						<li><a href="/index.html#about" class="smoothScroll">公 司</a></li>
						<li><a href="/index.html#service" class="smoothScroll">服 务</a></li>
						<li><a href="/index.html#case" class="smoothScroll">案 例</a></li>
						<li><a href="/index.html#news" class="smoothScroll">动 态</a></li>
						<li><a href="/index.html#contact" class="smoothScroll">联 系</a></li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container -->
		</nav>
		<!-- end navigation -->
		<!-- start news -->
		<section id="details">
			<div class="details-header text-center">
                <h3>WEB响应式网站建设</h3>
                <p>发布日期：2017-03-14</p>
			</div>
			<div class="details-content text-left container">
				<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">经过十多年的快速发展,中国的互联网如今已经日趋成熟。随着3G、4G的发展和移动通信及WEB2.0技术的提升以及近年来各种移动智能设备的兴起，移动互联网也即将会步入高速发展时期,成为一种大势所趋。这一来就使中国互联网的发展变得更加丰富、多元化了。根据DailyTech的统计，到2015年，移动互联网的用户数量将会超过桌面用户。对于接入移动互联网的用户除了智能手机外，使用平板电脑甚至是电视机进行上网的用户也在不断增加。在现今这种形势下，我们怎样让设计的网站能够尽量兼容更多的移动设备来确保用户的良好体验，这将成为我们需要面对的一大挑战。在这种情形下我们关心的问题不再只是网页的样式能否在不同浏览器中保持兼容，而需要我们关注更多的是:设计出来的页面如何以适应不同的设备，包括不同的系统平台,平台屏幕尺寸,不同的环境等。</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">为了可以兼容更多的设备，近几年提出了“响应式设计”。那么就响应式设计进行简单的分析：</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">一、响应式设计的理念</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">响应式Web设计(Responsive Web design)的理念是整个web开发的相关页面都能够与不同的移动设备兼容显示，主要指的是入口页面可以自动判断不同设备不同环境（操作系统屏幕分辨率、屏幕尺寸、屏幕定向等）用户行为（改变窗口大小等）并根据这些不同的需求自行对页面进行响应式调整来兼容各种设备的正常显示与浏览。涉及这种设计的技术具体方式由多方面组成，包括有CSS media query查询、流体布局和弹性网格、图片等。不管访问web页面的用户是何种设备终端包括(PC机、平板电脑，或者手机)在者不管对页面进行全屏浏览还是非全屏浏览的情况，又或者用户对屏幕的摆放是横向还是竖向，页面都应该能够识别当前访问用户的终端环境并且自动切换分辨率、图片尺寸及相关脚本功能等，以兼容不同设备。如图1.1所示：</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">二、响应式设计的优势</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">1.开发、维护、运营成本优势</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本。</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">2.兼容性优势</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但是响应式Web设计可以提前预防这个问题。</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">3.操作灵活</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">三、响应式设计原则</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">1、移动优先原则</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">随着移动互联网的大举发展，移动设备的不断增加，移动终端的持有人数已经逐渐在赶超PC机，考虑到当前的发展形势，优先考虑移动设计无可厚非。有限所谓移动优先原则是指，整个页面设计的流程优先考虑到移动设备的兼容显示，再次前提下在考虑PC机的兼容显示。</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">2、触控优先原则</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">对触控优先原则的考虑也是基于移动互联网的发展迅速的前提下提出的。在移动设备终端上目前触控是我们主要的一种人机交互方式。基于这点在设计页面上就应该优先考虑设计出易于手指触摸的按钮等交互元素其次才是考虑同样易于鼠标点击的按钮等其他元素。所以为了能够使设计出的界面能够兼容更多的平台系统、设备环境等条件，网页设计师应该先从触控优先原则入手设计页面，之后在此基础上对页面进行适当的调整以在不影响移动设备正常显示下，达到对PC端的兼容显示。即使网页上的相关交互元素既适合手指触摸又适合鼠标点击。</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">3、弹性化原则</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">在弹性化布局的基础上引入CSS媒介查询的功能使得web响应式的设计和开发思路让页面真正的富有弹性。页面布局再不会被破坏，图片的尺寸可以被自动调整，虽然这不是最完美的解决方案，但它给了我们一种新的选择。这样无论用户切换设备的屏幕定向方式，还是从PC机屏幕转到iPad或者手机上浏览，页面都能够作者响应与调整。&nbsp;</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">4、宏观性原则</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';">在响应式 Web 开发过程中，设计人员在项目的每一个阶段都要在多种浏览器和不同尺寸屏幕中进行测试，以尽早发现问题。</span><br />
<span style="font-size:14px;line-height:2;font-family:'Microsoft YaHei';"></span>			</div>
			<nav class="container">
			  	<ul class="pager">
                    <li class="previous"><a href="/news/news-details44.html"><span aria-hidden="true">&larr;</span> 上一篇</a></li>
                    <li class="next"><a href="/news/news-details52.html">下一篇 <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
			</nav>
		</section>
		<!-- end news -->
		<!-- start footer -->
        <footer id="footer">
    <div class="container wow fadeInUp" data-wow-duration="0.4s" data-wow-delay="0.4s">
		<div class="row">
			<div class="col-md-2 erweima">
			 				<img class="img-responsive center-block" src="/uploads/img/201605/573accaf00000.jpg" alt="erweima" />
				 			</div>
			<div class="col-md-10 copyright">
				<p>成都隆领科技有限公司</p>
				<p>公司地址：成都市锦江区锦东路555号</p>
				<p>公司座机：13308008843</p>
				<p>联系电话：<a style="color: #999;text-decoration: none;" href="tel:13308008843">13308008843</a></p>
				<p><a href="http://wpa.qq.com/msgrd?v=3&uin=513340495&site=qq&menu=yes"><img src="/template/longling/images/qq.png" alt="" /></a></p>
				<p>
					Copyright  2017 longling  蜀ICP备15033034号-1  站长统计
					<span>
						<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1259106743'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1259106743' type='text/javascript'%3E%3C/script%3E"));</script>
						<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1259106743'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s95.cnzz.com/z_stat.php%3Fid%3D1259106743%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
					</span>
					<script language="javascript" type="text/javascript" src="http://js.users.51.la/19008066.js"></script>
					<noscript><a href="http://www.51.la/?19008066" target="_blank"><img alt="&#x6211;&#x8981;&#x5566;&#x514D;&#x8D39;&#x7EDF;&#x8BA1;" src="http://img.users.51.la/19008066.asp" style="border:none" /></a></noscript>
					

				</p>
			</div>
		</div>	
	 </div>
</footer>
		<!-- end footer -->
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="/template/longling/js/bootstrap.min.js"></script>
		<script src="/template/longling/js/wow.min.js"></script>
		<script type="text/javascript">
			$(function() {
				/* 延迟动画 */
				new WOW().init();
			});
		</script>
	</body>
</html>